<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link  href="css/addTrip.css" rel="stylesheet">

    <title>添加车次</title>
</head>
<body>

    <div id="admitHeader" class="headerpage"></div>
    <div style="text-align: center;" id="title">
        <p>火车购票系统 --- 管理员页面</p>
        <p>Welcome</p>
    </div>
    <div id="addTrip">
        <form action="" id="addTripForm">
            <table class="table">
                <tr id="table_header">
                    <td colspan="2"  style="text-align: center;">添加车次</td>
                </tr>
                <tr>
                    <td id="tr-left">车次编号</td>
                    <td id="tr-right"><input type="text" placeholder="请输入车次" id="id" name="id"></td>
                </tr>
                <tr>
                    <td id="tr-left">起点</td>
                    <td id="tr-right">
                        <label for="start"></label>
                        <select id="start" name="start" id="start">
                            <option value="天津">天津</option>
                            <option value="北京">北京</option>
                            <option value="南京">南京</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td id="tr-left">终点</td>
                    <td id="tr-right">
                        <label for="end"></label>
                        <select id="end" name="end" id="end">
                            <option value="天津">天津</option>
                            <option value="北京">北京</option>
                            <option value="南京">南京</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td id="tr-left">出发时间</td>
                    <td id="tr-right"><input type="datetime-local" name="start_time" id="start_time"></td>
    
                </tr>
                <tr>
                    <td id="tr-left">结束时间</td>
                    <td id="tr-right"><input type="datetime-local" id="end_time" name="end_time"></td>
                </tr>
                <tr>
                    <td id="tr-left">数量</td>
                    <td id="tr-right"><input type="number" placeholder="请输入数量" id="count" name="count"></td>
                </tr>
                <tr>
                    <td id="tr-left">价格</td>
                    <td id="tr-right"><input type="number" placeholder="请输入价格" id="price" name="price"></td>
                </tr>
                <tr>
                    <td colspan="2"  style="text-align: center;"><input type="submit"></td>
                </tr>
                <tr>
                    <td colspan="2" id="errorMsg"></td>
                </tr>
            </table>
        </form>
    </div>
    <script>
        $("#addTripForm").submit(function() {
            alert($("#addTripForm").serialize());
            $.ajax({
                url:"addTrip",
                type:"post",
                data:$("#addTripForm").serialize(),
                success: function(data) {
                    data = JSON.parse(data);
                    if (data.code == 200) {
                        alert("添加车次成功");
                        // 将车次信息清空
                        // 展示已有车次
                    } else {
                        $("#errorMsg").html(data.msg);
                    }
                }
                
            })
            return false;
        })
    </script>
    <script>
        $(".headerpage").load("admitHeader.html")
    </script>


</body>
</html>